<template>
  <div class="details">
    <x-header style="background-color:#000;">
      商品详情
      <router-link to="/cart" slot="right">
        <i class="fa fa-shopping-cart"></i>
        <badge v-if="count" v-bind:text="count"></badge>
      </router-link>
    </x-header>
    <swiper :list="demo03_list" auto height="280px"></swiper>
    <div class="content">
      <p>{{goodsData.pname}}</p>
      <p>
        <span class="text-orange">RMB:{{goodsData.pnprice}}</span> 
        <span class="text-little-grey">
          <del>RMB:{{goodsData.poprice}}</del>
        </span>
      </p>
      <h4>码数</h4>
      <checker v-model="size" default-item-class="demo1-item" selected-item-class="demo1-item-selected" radio-required>
        <checker-item :value="sizeLists" v-for="(sizeLists,index) in goodsData.psize" :key="index">{{sizeLists}}</checker-item>
      </checker>
      <!-- <h4>颜色</h4>
      <checker v-model="color" default-item-class="demo1-item" selected-item-class="demo1-item-selected" radio-required>
        <checker-item :value="colorLists" v-for="(colorLists,index) in goodsData.color" :key="index">{{colorLists}}</checker-item>
      </checker> -->
      <br>
      <h4>商品描述</h4>
      <p>{{goodsData.pdes}}</p>
      <br>
      <h4>库存</h4>
      <p>{{goodsData.pstock}}</p>
      <button class="bg-orange" @click="submit()">加入购物车</button>
    </div>
    <!-- 确认框 -->
    <div v-transfer-dom>
      <confirm v-model="isSubmit"
      @on-confirm="onConfirm"
      title="确认要加入购物车吗？">
        <p style="text-align:center;">
          <p>颜色: {{color}}</p>
          <p>码数: {{size}}</p>
        </p>
      </confirm>
    </div>
    <!-- 提示必须选择样式-->
    <div v-transfer-dom>
      <confirm v-model="show"
      @on-confirm="onConfirm2"
      title="友情提示">
        <p style="text-align:center;">亲，您还没有选择款式呢~</p>
      </confirm>
    </div>
  </div>
</template>
<script>
import {XHeader,Badge,Swiper,Checker, CheckerItem,Confirm,TransferDomDirective as TransferDom} from 'vux'
import api from '../api/cart.js'
import goodsApi from '../api/goods.js'
const imgList = [
  'https://img.alicdn.com/imgextra/i3/2171367772/TB2gl0VaDdYBeNkSmLyXXXfnVXa_!!2171367772.jpg',
  'https://img.alicdn.com/imgextra/i2/2171367772/TB2wdgqcuOSBuNjy0FdXXbDnVXa_!!2171367772.png',
  'https://img.alicdn.com/imgextra/i2/2171367772/TB2l5wvcACWBuNjy0FaXXXUlXXa_!!2171367772.png'
]
const demoList = imgList.map((one, index) => ({
  url: 'javascript:',
  img: one
}))

export default {
  components:{
    XHeader,Badge,Swiper,Checker, CheckerItem,Confirm
  },
  directives: {
    TransferDom
  },
  data(){
    return {
      datailsList_index:0,
      demo03_list:demoList,
      size:"",
      color:"",
      isSubmit:false,
      show: false,
      id:0,
      goodsData:{
        title:"韩版bf纯色百搭圆领长袖T恤女秋装学生休闲上衣宽松显瘦打底衫潮",
        nowPrice:56,
        previousPrice:98,
        size:['xs','s','m','l','xl'],
        color:['红色','黑色','蓝色','卡其色','白色'],
        des:"衣长：70   胸围：114  袖长：56  *尺寸均为人工手量，有1-3cm误差属正常",
        num:55
      },
      newGoodsData: {}  //选择完成的商品信息
    }
  },
  computed: {
    count() {
      return this.$store.state.details.count
    }
  },
  methods:{
    submit(){
      if(this.size === '') {   //必须选择款式
        this.show = true
      }else {
        this.isSubmit=true
      }
      
    },
    details(){
      goodsApi.goodsDetails((res)=>{
        console.log(res)
        this.goodsData = res.data;
        this.goodsData.psize= res.data.psize.split('#');
        this.goodsData.pimg= res.data.pimg.split('#');
        this.demo03_list=this.goodsData.pimg.map((one, index) => ({
          url: 'javascript:',
          img: one
          }))
        },(err)=>{},{},this.id)
      },
    onConfirm() {
      this.newGoodsData = {
        id:this.goodsData.pid,
        img:this.goodsData.pimg[0],
        title: this.goodsData.pname,
        nowPrice: this.goodsData.pnprice.toString(),
        previousPrice: this.goodsData.poprice,
        // size: this.size,
        size:"m",
        // color: this.color,
        des: this.goodsData.pdes,
        num: this.goodsData.pstock,
        numbers: 1,
        isChecked: false,
        cid:0
      }
      

      //API
      let test = {
        uid: 1,
        pid: this.newGoodsData.id,
        cstock: this.newGoodsData.numbers,
        caprice: this.newGoodsData.nowPrice ,
        csize: this.newGoodsData.size,
        cstatus: '未支付',
        cpicture:this.newGoodsData.img
      } 
      let cart = JSON.stringify(test)
      console.log(typeof cart)
      api.postCarList((res) => {
        console.log("details success");
        console.log(res.data);
        this.newGoodsData.cid = res.data;
      }, err => {}, cart)
      this.$store.dispatch('addCarList',this.newGoodsData)
    },
    onConfirm2() {}
    // getParams(){
    //   this.id=this.$route.params.id
    // }
  }
  ,
  created(){
    this.id=this.$route.params.id,
    this.details()
  },
  watch:{
    // '$route':'getParams'
  }
}
</script>
<style lang="less" scoped>
  .details{
    i{
      font-size: 6vw;
      margin-right: 4vw;
    }
    .vux-badge{
      position: absolute;
      top: -2vw;
      right: 0;
    }
    .content{
      padding: 2vw;
      .demo1-item {
        border: 1px solid #ececec;
        padding: 1vw 4vw;
      }
      .demo1-item-selected {
        border: 1px solid #f60;
      }
      button{
        width: 100%;
        color: #fff;
        border: 0;
        height: 12vw;
        border-radius: 1vw;
      }
    }
  }
</style>